<template>
    <div class="container">
        <div class="card">
          <el-breadcrumb separator="/" class="card-body">
            <el-breadcrumb-item :to="{ path: '/AdminHome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ this.$route.meta.title }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="card">
            <div class="card-header">供应商查询</div>
            <div class="card-body">
                <div class="query-criteria clearfix">
                    <el-form :inline="true" :model="SupplierSort" class="demo-form-inline f-left">
                        <div class="el-form-item el-form-item--small"><label class="el-form-item__label">快速查询</label></div>
                        <el-form-item>
                            <el-input @change="initSupplierList(SupplierSort.queryKey)" v-model.trim="SupplierSort.queryKey" placeholder="负责人/手机号/供应商编号"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit(SupplierSort.queryKey)" :disabled="SupplierSort.queryKey == ''">查询</el-button>
                        </el-form-item>
                    </el-form>
                    <div class="f-right">
                        <el-button type="warning" icon="el-icon-plus" @click="create">添加供应商</el-button>
                        <el-button type="warning" icon="el-icon-plus">导入供应商</el-button>
                        <el-button type="warning" icon="el-icon-download">下载供应商模板</el-button>
                    </div> 
                </div>
            </div>
        </div>
        <div class="card User-list">
          <div class="card-header">供应商列表</div>
          <div class="card-body">
            <el-table stripe ref="multipleTable" v-loading="isLoading" :data="SupplierData" tooltip-effect="dark" style="width: 100%">
                <el-table-column prop="code" label="编号" width="120">
                </el-table-column>
                <el-table-column prop="name" label="单位名称">
                </el-table-column>
                <el-table-column prop="address" label="供应商地址">
                </el-table-column>
                <el-table-column prop="businessDesc" label="业务描述">
                </el-table-column>
                <el-table-column prop="contactName" label="联系人" width="120">
                </el-table-column>
                <el-table-column prop="contactMobile" label="联系电话" width="180">
                </el-table-column>
                <el-table-column prop="contactEmail" label="联系邮箱" width="180">
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="200">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="detail(scope.row.id)">查看</el-button>
                    <el-button size="mini" type="text" @click="toUpdate(scope.row.id)">编辑</el-button>
                    <el-button size="mini" type="text" @click="delSupplier(scope.$index, scope.row.id)">删除</el-button>
                  </template>
                </el-table-column>
            </el-table>
          </div>
          <div class="page-wrap" v-if="pagesTotal>10">
              <el-pagination background @size-change="sizeChange" @current-change="currentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagesTotal">
              </el-pagination>
          </div>
        </div>
    </div>
</template>

<script>
import request from "@/utils/request"
export default {
  name: "Supplier",
  data() {
    return {
      isLoading: false,
      SupplierSort: {
        queryKey: ""
      },
      SupplierData: "",

      pageSize: 10,
      pagesTotal: 0,
      currentPage: 1
    };
  },
  methods: {
    onSubmit(content) {
      console.log(content);
      let pageSize = this.pageSize;
      this.getSupplierList(content, pageSize, 1);
    },
    initSupplierList(key) {
      let pageSize = this.pageSize;
      if (key == "") {
        this.getSupplierList("", pageSize, 1);
      }
    },
    create() {
      this.$router.push({
        path: "/SystemSetting/Supplier/Create"
      });
    },
    delSupplier(index, id) {
      this.$confirm("确认删除这个供应商？")
        .then(_ => {
          request({
            method: "get",
            url: this.$api.deleteSupplier + `?id=${id}`
          });
        })
        .then(() => {
          this.$message.success("删除成功!");
          this.getSupplierList("", 10, 1);
        })
        .catch(_ => {});
    },
    detail(id) {
      this.$router.push({
        path: "/SystemSetting/Supplier/Detail" + "?id=" + id
      });
    },
    toUpdate(id) {
      this.$router.push({
        path: "/SystemSetting/Supplier/Update" + "?id=" + id
      });
    },
    getSupplierList(condition = "", limit = 10, offset = 1) {
      //获取用户列表
      this.isLoading = true;
      request({
        method: "get",
        url:
          this.$api.querySupplierForPage +
          `?condition=${condition}&limit=${limit}&offset=${offset}`
      }).then(res => {
        this.SupplierData = res.data.list;
        this.pagesTotal = res.data.total;
        this.pageSize = res.data.pageSize;
        this.isLoading = false;
      });
    },
    sizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getSupplierList("", pageSize, 1);
    },
    currentChange(currentPage) {
      let pageSize = this.pageSize;
      this.getSupplierList("", pageSize, currentPage);
    }
  },
  mounted() {
    this.getSupplierList();
  }
};
</script>

<style lang="less" scoped>
.fn-btn {
  float: right;
}
</style>